<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表管理页</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>
    <!-- 提示框信息 -->
    <div th:replace="point-modal::modal"></div>

    <div class="container"  style="margin-bottom: -20px; height: 695px;overflow: auto;">
        <section class="p-0">
            <div class="container-fluid p-0">
                <div class="row">
                    <!-- 左侧导航栏 -->
                    <div th:replace="sidebar::left"></div>
                    <!-- 右侧信息页 -->
                    <div class="col-lg-9 col-md-8 col-sm-12"  style="height:695px;overflow:auto;">
                        <div class="dashboard-body">
                            <div class="dashboard_wraper">
                                <table class="property-table-wrap table-responsive bkmark" style="margin-top: -10px;margin-bottom: -30px;">
                                    <tbody>
                                    <tr>
                                        <th style="width: 280px;">账号信息</th>
                                        <th style="width: 100px;">联系方式</th>
                                        <th style="width: 150px;">其他信息</th>
                                        <th>角色</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr th:each="user:${users}">
                                        <td>
                                            <span th:text="${user.username} + ' ' + ${user.userDisplayNa}">用户名+真实姓名</span>
                                            <span th:text="${user.idCard}">用户身份证号</span>
                                        </td>
                                        <td>
                                            <span th:text="${user.email}">用户邮箱</span>
                                            <span th:text="${user.phone}">联系方式</span>
                                        </td>
                                        <td>
                                            <span th:text="${(user.hobby==null || user.hobby == '')?'用户未填写爱好':user.hobby}">爱好</span>
                                            <span th:text="${(user.job==null || user.job == '')?'用户未填写工作':user.hobby}">工作</span>
                                        </td>
                                        <td th:switch="${user.role}">
                                            <span th:case="owner">房东</span>
                                            <span th:case="customer">租客</span>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0)" th:onclick="|changeUserStatus(${user.id})|">
                                                <span th:id="'userStatus' + ${user.id}" th:class="${user.status == 1 ? 'text-danger':'text-success'}" th:text="${user.status == 1?'禁用':'启用'}"></span>
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!-- 分页 -->
                                <nav class="mt-5" th:if="${page.rows>0}" th:replace="index::pagination"></nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>

    <script>
        $(function () {
            $("#userManage").attr("class", "active");
        })
    </script>
</body>
</html>